<%--
  Created by IntelliJ IDEA.
  User: SXYQ
  Date: 2020/12/16
  Time: 9:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/plugins/layui/css/layui.css"/>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <style>
        .mailTable {
            width: 100%;
            border-top: 1px solid #E6EAEE;
            border-left: 1px solid #E6EAEE;
        }

        .mailTable tr td {
            width: 100px;
            height: 35px;
            line-height: 35px;
            box-sizing: border-box;
            padding: 0 10px;
            border-bottom: 1px solid #E6EAEE;
            border-right: 1px solid #E6EAEE;
        }

        .mailTable tr td.column {
            background-color: #EFF3F6;
            color: #393C3E;
            width: 20%;
        }

    </style>
</head>
<body>
<div class="layui-tab layui-tab-card" style="margin: 0px">
    <ul class="layui-tab-title">
        <li class="layui-this">详细数据</li>
        <li>用户管理</li>
        <li>权限分配</li>
        <li style="float: right">
            <a class="layui-btn layui-btn-radius layui-btn-primary" id="zonghe">综合版</a>
        </li>
        <li style="float: right">
            <a class="layui-btn layui-btn-radius layui-btn-primary" id="xiangxi">详细版</a>
        </li>


    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">


            <div class="layui-form">
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <%--   <thead>
                       <tr>
                           <th>人物</th>
                           <th>民族</th>
                           <th>出场时间</th>
                           <th>格言</th>
                       </tr>
                       </thead>--%>
                    <tbody>
                    <tr>
                        <td style="background-color: #7a869d;width: 50px">桩端标识</td>
                        <td>汉族</td>
                        <td>1989-10-14</td>
                        <td>人生似修行</td>
                        <td>人生似修行</td>
                        <td>人生似修行</td>
                    </tr>
                    <tr>
                        <td>张爱玲</td>
                        <td>汉族</td>
                        <td>1920-09-30</td>
                        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                    </tr>
                    <tr>
                        <td>Helen Keller</td>
                        <td>拉丁美裔</td>
                        <td>1880-06-27</td>
                        <td> Life is either a daring adventure or nothing.</td>
                        <td> Life is either a daring adventure or nothing.</td>
                        <td> Life is either a daring adventure or nothing.</td>
                    </tr>
                    <tr>
                        <td>岳飞</td>
                        <td>汉族</td>
                        <td>1103-北宋崇宁二年</td>
                        <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
                        <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
                        <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
                    </tr>
                    <tr>
                        <td>孟子</td>
                        <td>华夏族（汉族）</td>
                        <td>公元前-372年</td>
                        <td>猿强，则国强。国强，则猿更强！</td>
                        <td>猿强，则国强。国强，则猿更强！</td>
                        <td>猿强，则国强。国强，则猿更强！</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="layui-tab-item">
            <table class="layui-hide" id="test"></table>
        </div>
        <div class="layui-tab-item">

            <div style="padding: 10px; background-color: #F2F2F2;height: 88%">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body" style="height: 47%">
                                <div id="speedChart" style="width: 620px;height:310px;"></div>

                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body" style="height: 47%">
                                <div id="depthChart" style="width: 620px;height:310px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body" style="height: 47%">
                                <div id="electricityChart" style="width: 620px;height:300px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div class="layui-card">
                            <div class="layui-card-body" style="height: 47%">
                                <div id="fluxChart" style="width: 620px;height:300px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/plugins/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<%--<script src="${pageContext.request.contextPath}/plugins/adminLTE/js/app.min.js"></script>--%>
</body>
<script>
    layui.use('element', function () {
        var $ = layui.jquery
            , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabChange: function () {
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

        $('.site-demo-active').on('click', function () {
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });


        element.on('tab(test)', function (elem) {
            location.hash = 'test=' + $(this).attr('lay-id');
        });

    });


    layui.use('table', function () {
        var table = layui.table;

        table.render({
            elem: '#test'
            , url: '/cement/test.do'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                // {field:'id', width:80, title: 'ID', sort: true}
                {title: '序号', align: 'center', type: 'numbers'}
                , {field: 'username', width: 80, title: '用户名'}
                /*      ,{field:'sex', width:80, title: '性别', sort: true}
                      ,{field:'city', width:80, title: '城市'}
                      ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                      ,{field:'experience', title: '积分', sort: true}
                      ,{field:'score', title: '评分', sort: true}
                      ,{field:'classify', title: '职业'}
                      ,{field:'wealth', width:137, title: '财富', sort: true}*/
            ]]
        });
    });


    //生产记录页面传入的参数
    function child(obj) {
        $("#t1").html(obj.stake_mark);
        $("#t2").html(obj.pile_driver_num);
        $("#t3").html(obj.device_code);
        $("#t4").html(obj.pile_time);
        $("#t5").html(obj.start_date);
        $("#t6").html(obj.end_date);
        $("#t7").html(obj.pile_length);
        $("#t8").html(obj.zdxd);
        $("#t9").html(obj.zdzs);
        $("#t10").html(obj.zdts);
        $("#t11").html(obj.au_aol);
        $("#t12").html(obj.au_aoc);
        $("#t13").html(obj.average_aol);
        $("#t14").html(obj.average_aoc);
        $("#t15").html(obj.rih_av);
        $("#t16").html(obj.to_drill_av);
        $("#t17").html(obj.maxdl);

        //异步请求
        $.post(
            "/data/getCategory.do",//访问地址
            {stake_mark: obj.stake_mark},//携带的参数
            function (callback) {
                list1 = getEChartsData(callback.list1);   // 赋值给刚才定义的值
                list2 = getEChartsData(callback.list2);   // 赋值给刚才定义的值
                list3 = getEChartsData(callback.list3);   // 赋值给刚才定义的值
                list4 = getEChartsData(callback.list4);   // 赋值给刚才定义的值
                list5 = getEChartsData(callback.list5);   // 赋值给刚才定义的值
                list6 = getEChartsData(callback.list6);   // 赋值给刚才定义的值
                list7 = getEChartsData(callback.list7);   // 赋值给刚才定义的值
                // console.log(result);
                // 基于准备好的dom，初始化echarts实例
                var speedChart = echarts.init(document.getElementById('speedChart'));
                var depthChart = echarts.init(document.getElementById('depthChart'));
                var electricityChart = echarts.init(document.getElementById('electricityChart'));
                var fluxChart = echarts.init(document.getElementById('fluxChart'));
                speedOption = {
                    title: {
                        text: '流量、速度变化曲线',//图表标题
                        left: 'left'//位置水平居左
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {
                        data: ['流量', '速度'],
                        left: 'right'
                    },
                    xAxis: [
                        {
                            type: 'category',
                            // position: 'top',//x轴居上
                            data: list1/*['07:15:37', '07:15:38', '07:15:39', '07:15:40', '07:15:41', '07:15:42', '07:15:43', '7:15:44', '7:15:45', '7:18:41', '7:21:37', '7:24:37', '7:26:37', '7:30:37', '7:32:37', '7:35:37']*/,
                            axisPointer: {
                                type: 'shadow'
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '流量( L/min)',
                            min: 0,
                            max: 100,
                            interval: 20,
                            // inverse: true,//y轴反转
                            axisLabel: {
                                formatter: '{value}'//设置Y轴单位
                            }
                        },
                        {
                            type: 'value',
                            name: '速度(cm/min)',
                            min: 0,
                            max: 999,
                            interval: 200,
                            // inverse: true,
                            axisLabel: {
                                formatter: '{value} '
                            }
                        }
                    ],
                    series: [
                        {
                            name: '流量',
                            type: 'line',
                            data: list2
                        },

                        {
                            name: '速度',
                            type: 'line',
                            yAxisIndex: 1,
                            data: list3
                        }
                    ]
                };
                depthOption = {
                    title: {
                        text: '深度曲线',//图表标题
                        left: 'left'//位置水平居左
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {
                        data: ['深度(m)'],
                        left: 'right'
                    },
                    xAxis: [
                        {
                            type: 'category',
                            position: 'top',//x轴居上
                            data: list1/*['07:15:37', '07:15:38', '07:15:39', '07:15:40', '07:15:41', '07:15:42', '07:15:43', '7:15:44', '7:15:45', '7:18:41', '7:21:37', '7:24:37', '7:26:37', '7:30:37', '7:32:37', '7:35:37']*/,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '深度( L/min)',
                            min: 0,
                            max: 30,
                            interval: 5,
                            inverse: true,//y轴反转
                            axisLabel: {
                                formatter: '{value}'//设置Y轴单位
                            }
                        }
                    ],
                    series: [
                        {
                            name: '深度(m)',
                            type: 'line',
                            data: list4
                        }
                    ]
                };
                electricityOption = {
                    title: {
                        text: '钻杆电流曲线',//图表标题
                        left: 'left'//位置水平居左
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {
                        data: ['电流(A)'],
                        left: 'right'
                    },
                    xAxis: [
                        {
                            type: 'category',
                            // position: 'top',//x轴居上
                            data: list1/*['07:15:37', '07:15:38', '07:15:39', '07:15:40', '07:15:41', '07:15:42', '07:15:43', '7:15:44', '7:15:45', '7:18:41', '7:21:37', '7:24:37', '7:26:37', '7:30:37', '7:32:37', '7:35:37']*/,
                            axisPointer: {
                                type: 'shadow'
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '电流(A)',
                            min: 0,
                            max: 150,
                            interval: 30,
                            // inverse: true,//y轴反转
                            axisLabel: {
                                formatter: '{value}'//设置Y轴单位
                            }
                        }
                    ],
                    series: [
                        {
                            name: '电流(A)',
                            type: 'line',
                            data: list5
                        }
                    ]
                };
                var data = [[13.60, 0.25], [2, 1], [3, 4], [4, 7], [5, 2], [6, 2], [7, 4], [8, 3], [10, 1], [11, 1], [12, 1], [13, 1], [14, 4], [15, 3], [16, 1], [18, 1], [20, 2], [22, 2], [23, 1], [25, 1], [26, 1], [27, 4], [29, 2], [30, 1], [31, 1], [32, 2], [34, 2], [35, 3], [36, 5], [37, 3], [38, 2], [42, 2], [43, 1], [46, 1], [47, 1], [48, 3], [51, 1], [53, 1], [56, 1], [62, 2], [63, 2], [65, 3], [66, 1], [67, 1], [68, 2], [69, 1], [70, 1], [71, 1], [75, 1], [77, 1], [83, 1], [85, 2], [86, 1], [88, 1], [91, 1], [96, 1], [104, 1], [106, 1]];

                fluxOption = {

                    title: {
                        text: '浆量变化曲线',//图表标题
                        left: 'left'//位置水平居左
                    },

                    tooltip: {
                        trigger: 'item',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            var color = params.color;//图例颜色
                            var htmlStr = '<div>';
                            htmlStr += '深度(m):  ' + '<b>' + params.value[1] + '</b></br>';//x轴的名称
                            htmlStr += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + params.color + '"></span>';
                            //为了保证和原来的效果一样，这里自己实现了一个点的效果
                            htmlStr += '浆量(L/0.25m):  ' + '<b>' + params.value[0] + '</b></br>';//y轴的名称
                            //添加一个汉字，这里你可以格式你的数字或者自定义文本内容
                            htmlStr += '</div>';

                            return htmlStr;
                        }
                    },
                    legend: {
                        data: '浆量(L/0.25m)',
                        left: 'right'
                    },
                    xAxis: {
                        name: '浆量',
                        type: 'value',
                        interval: 2, // 步长
                        position: 'top',
                        min: 0, // 起始
                        max: 20 // 终止
                    },
                    yAxis: {
                        name: '深度',
                        type: 'value',
                        inverse: true,//y轴反转
                        interval: 2, // 步长
                        min: 0, // 起始
                        max: 14 // 终止
                    },
                    series: [
                        {
                            type: 'line',
                            smooth: true,
                            data: data
                        }
                    ]
                }

                ;

                //使用刚指定的配置项和数据显示图表。
                speedChart.setOption(speedOption);
                depthChart.setOption(depthOption);
                electricityChart.setOption(electricityOption);
                fluxChart.setOption(fluxOption);
            }

            ,
            "json"
        );


        //将集合转为数组
        function getEChartsData(data) {
            var seriesData = [];
            for (var i = 0; i < data.length; i++) {
                seriesData.push(data[i]);
            }
            return seriesData;
        }

    }

    echart();

    //设备监控传入
    function echart() {
        var obj = window.parent.toDetailsValue();
        console.log(obj.stake_mark);
        //异步请求
        $.post(
            "/data/getCategory.do",//访问地址
            {stake_mark: obj.stake_mark},//携带的参数
            function (callback) {
                list1 = getEChartsData(callback.list1);   // 赋值给刚才定义的值
                list2 = getEChartsData(callback.list2);   // 赋值给刚才定义的值
                list3 = getEChartsData(callback.list3);   // 赋值给刚才定义的值
                list4 = getEChartsData(callback.list4);   // 赋值给刚才定义的值
                list5 = getEChartsData(callback.list5);   // 赋值给刚才定义的值
                list6 = getEChartsData(callback.list6);   // 赋值给刚才定义的值
                list7 = getEChartsData(callback.list7);   // 赋值给刚才定义的值
                // console.log(result);
                // 基于准备好的dom，初始化echarts实例
                var speedChart = echarts.init(document.getElementById('speedChart'));
                var depthChart = echarts.init(document.getElementById('depthChart'));
                var electricityChart = echarts.init(document.getElementById('electricityChart'));
                var fluxChart = echarts.init(document.getElementById('fluxChart'));
                speedOption = {
                    title: {
                        text: '流量、速度变化曲线',//图表标题
                        left: 'left'//位置水平居左
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {
                        data: ['流量', '速度'],
                        left: 'right'
                    },
                    xAxis: [
                        {
                            type: 'category',
                            // position: 'top',//x轴居上
                            data: list1/*['07:15:37', '07:15:38', '07:15:39', '07:15:40', '07:15:41', '07:15:42', '07:15:43', '7:15:44', '7:15:45', '7:18:41', '7:21:37', '7:24:37', '7:26:37', '7:30:37', '7:32:37', '7:35:37']*/,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '流量( L/min)',
                            min: 0,
                            max: 100,
                            interval: 20,
                            // inverse: true,//y轴反转
                            axisLabel: {
                                formatter: '{value}'//设置Y轴单位
                            }
                        },
                        {
                            type: 'value',
                            name: '速度(cm/min)',
                            min: 0,
                            max: 999,
                            interval: 200,
                            // inverse: true,
                            axisLabel: {
                                formatter: '{value} '
                            }
                        }
                    ],
                    series: [
                        {
                            name: '流量',
                            type: 'line',
                            data: list2
                        },

                        {
                            name: '速度',
                            type: 'line',
                            yAxisIndex: 1,
                            data: list3
                        }
                    ]
                };
                depthOption = {
                    title: {
                        text: '深度曲线',//图表标题
                        left: 'left'//位置水平居左
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {
                        data: ['深度(m)'],
                        left: 'right'
                    },
                    xAxis: [
                        {
                            type: 'category',
                            position: 'top',//x轴居上
                            data: list1/*['07:15:37', '07:15:38', '07:15:39', '07:15:40', '07:15:41', '07:15:42', '07:15:43', '7:15:44', '7:15:45', '7:18:41', '7:21:37', '7:24:37', '7:26:37', '7:30:37', '7:32:37', '7:35:37']*/,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '深度( L/min)',
                            min: 0,
                            max: 30,
                            interval: 5,
                            inverse: true,//y轴反转
                            axisLabel: {
                                formatter: '{value}'//设置Y轴单位
                            }
                        }
                    ],
                    series: [
                        {
                            name: '深度(m)',
                            type: 'line',
                            data: list4
                        }
                    ]
                };
                electricityOption = {
                    title: {
                        text: '钻杆电流曲线',//图表标题
                        left: 'left'//位置水平居左
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {
                        data: ['电流(A)'],
                        left: 'right'
                    },
                    xAxis: [
                        {
                            type: 'category',
                            // position: 'top',//x轴居上
                            data: list1/*['07:15:37', '07:15:38', '07:15:39', '07:15:40', '07:15:41', '07:15:42', '07:15:43', '7:15:44', '7:15:45', '7:18:41', '7:21:37', '7:24:37', '7:26:37', '7:30:37', '7:32:37', '7:35:37']*/,
                            axisPointer: {
                                type: 'shadow'
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name: '电流(A)',
                            min: 0,
                            max: 150,
                            interval: 30,
                            // inverse: true,//y轴反转
                            axisLabel: {
                                formatter: '{value}'//设置Y轴单位
                            }
                        }
                    ],
                    series: [
                        {
                            name: '电流(A)',
                            type: 'line',
                            data: list5
                        }
                    ]
                };
                var data = [[13.60, 0.25], [2, 1], [3, 4], [4, 7], [5, 2], [6, 2], [7, 4], [8, 3], [10, 1], [11, 1], [12, 1], [13, 1], [14, 4], [15, 3], [16, 1], [18, 1], [20, 2], [22, 2], [23, 1], [25, 1], [26, 1], [27, 4], [29, 2], [30, 1], [31, 1], [32, 2], [34, 2], [35, 3], [36, 5], [37, 3], [38, 2], [42, 2], [43, 1], [46, 1], [47, 1], [48, 3], [51, 1], [53, 1], [56, 1], [62, 2], [63, 2], [65, 3], [66, 1], [67, 1], [68, 2], [69, 1], [70, 1], [71, 1], [75, 1], [77, 1], [83, 1], [85, 2], [86, 1], [88, 1], [91, 1], [96, 1], [104, 1], [106, 1]];
                fluxOption = {
                    title: {
                        text: '浆量变化曲线',//图表标题
                        left: 'left'//位置水平居左
                    },

                    tooltip: {
                        trigger: 'item',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        },
                        formatter: function (params) {
                            var color = params.color;//图例颜色
                            var htmlStr = '<div>';
                            htmlStr += '深度(m):  ' + '<b>' + params.value[1] + '</b></br>';//x轴的名称
                            htmlStr += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + params.color + '"></span>';
                            //为了保证和原来的效果一样，这里自己实现了一个点的效果
                            htmlStr += '浆量(L/0.25m):  ' + '<b>' + params.value[0] + '</b></br>';//y轴的名称
                            //添加一个汉字，这里你可以格式你的数字或者自定义文本内容
                            htmlStr += '</div>';

                            return htmlStr;
                        }
                    },
                    legend: {
                        data: '浆量(L/0.25m)',
                        left: 'right'
                    },
                    xAxis: {
                        name: '浆量',
                        type: 'value',
                        interval: 2, // 步长
                        position: 'top',
                        min: 0, // 起始
                        max: 20 // 终止
                    },
                    yAxis: {
                        name: '深度',
                        type: 'value',
                        inverse: true,//y轴反转
                        interval: 2, // 步长
                        min: 0, // 起始
                        max: 14 // 终止
                    },
                    series: [
                        {
                            type: 'line',
                            smooth: true,
                            data: data
                        }
                    ]
                };
                //使用刚指定的配置项和数据显示图表。
                speedChart.setOption(speedOption);
                depthChart.setOption(depthOption);
                electricityChart.setOption(electricityOption);
                fluxChart.setOption(fluxOption);
            }, "json");


        //将集合转为数组
        function getEChartsData(data) {
            var seriesData = [];
            for (var i = 0; i < data.length; i++) {
                seriesData.push(data[i]);
            }
            return seriesData;
        }
    }
/*    $("#zonghe").click(function () {
    /!*    location.href = "${pageContext.request.contextPath}/data/excel/export.do";*!/
    console.log(123)
    })*/
/*    //div分布布局
    $(function () {
        var bodyH = $(window).height();
        console.log(bodyH);
        var h = bodyH / 2 - 70;
        $(".quarter-div .panel-body").height(h);
    });*/
</script>
</html>
